import styled from "styled-components"

const ButtonSty = styled.div `
    justify-content: center;
>div{
  position: relative;
}
nav{
  display:flex;
  justify-content:center;
  position: relative;
  top:-0.175rem;
ul{
  display:flex;
  position: relative;
  align-items: center;
  height:0.35rem;
  width:2.5rem;
  justify-content:center;
  border-radius:0.175rem;
  box-shadow: 0 0 0.1rem 0 #ccc;
  background-color:#fff;
  li{
  height:0.35rem;
  width:1.9rem;
  line-height:0.35rem;
  font-size:0.15rem;
  text-align:center;
  transition: all 200ms ease-in;
  &.active{
  color:#fff;
  z-index: 3;
  }
  &.slide{
    left:0;
    position: absolute;
    background-color:#308bfe;
    height:0.35rem;
    z-index: 2;
    border-radius: .175rem;
    width:1.5rem;
  }
  &.slider.right{
    right:0;
    position: absolute;
    background-color:#308bfe;
    height:0.35rem;
    z-index: 2;
    border-radius: .175rem;
    width:1.5rem;
  }
  }
}
}
`

const LoginSty = styled.div `
    position: relative;
    .wrap{
      display:felx;
      justify-content:center;
      margin-bottom:0.285rem;  
      .kuang{
       color:#3e4a59;
       padding:.3rem;
       background-color:#fff;
       height:2.85rem;
       width:86%;
       border-radius:0.1rem;
       box-shadow:-10px 0px 10px #ccc,  
                  0px -10px 10px #ccc,  
                  10px 0px 10px #ccc,  
                  0px 10px 10px #ccc;
       h1{
         font-size:.22rem;
         line-height:.22rem;
         margin-bottom:.24rem;
       }
       ul{
         li{
           height:.55rem;
           margin-bottom:.2rem;
           div{
             display:flex;
             width:100%;
             justify-content:space-between;
             border-bottom: 1px solid #ccc;
             span{
               font-size:.11rem;
               display:flex;
               align-items:center;
               >img{
                 height:.18rem;
               }
             }
             input{
               height:.44rem;
               width:80%;
               border-style:none;
               padding-left:.08rem;
             }
           }
         }
       }
       >div{
         display:flex;
         padding-top:.16rem;
         justify-content:space-between;
       }
   }
    }
    .ftr{
      display:flex;
      justify-content:center;
      >div{
        display:flex;
        justify-content:space-between;
        width:86%; 
        >div{
          display:flex;
          width:50%;
          justify-content:center;
          align-items:center;
          button{
            width:1.65rem;
            height:.5rem;
            background-color:#308bfe;
            color:#fff;
            font-size:0.175rem;
            border-style:none;
            border-radius:0.05rem;
          }
        } 
      }
    }
    .footer{
      margin-top:.47rem;
      bottom:0;
      width:100%;
      height:.9rem;
      display:flex;
      justify-content:center;
      >div{
      width:66.66%;
      height:.9rem;
      .three{
        height:0.4rem;
        display:flex;
        justify-content:space-around;
        >div{
          height:0.4rem;
          hr{
          display:block;
            }
            }
      }
      .last{
        height:.5rem;
        display:flex;
        justify-content:space-around;
        >div{
          height:.5rem;
          img{
            height:0.4rem;
          }
        }
      }
      }
    }

`
const ScrllSty = styled.div`
   overflow-x:scroll;
`
const RegistSty = styled.div `
     position: relative;
    .wrap{
      display:felx;
      justify-content:center;
      margin-bottom:0.285rem;  
      .kuang{
       color:#3e4a59;
       padding:.3rem;
       background-color:#fff;
       height:3.8rem;
       width:86%;
       border-radius:0.1rem;
       box-shadow:-10px 0px 10px #ccc,  
                  0px -10px 10px #ccc,  
                  10px 0px 10px #ccc,  
                  0px 10px 10px #ccc;
       h1{
         font-size:.22rem;
         line-height:.22rem;
         margin-bottom:.24rem;
       }
       ul{
         li{
           height:.55rem;
           margin-bottom:.2rem;
           div{
             display:flex;
             width:100%;
             justify-content:space-between;
             border-bottom:1px solid #ccc;
             span{
               display:flex;
               align-items:center;
               font-size:.11rem;
               >img{
                 height:.18rem;
               }
               button{
                 width:1.4rem;
                 height:.35rem;
                 color:#fff;
                 border-style:none;
                 border-radius:.35rem;
                 background-color:#308bfe;
               }
             }
             input{
               height:.44rem;
               width:80%;
               border-style:none;
               padding-left:.08rem;
               
             }
           }
         }
       }
       >div{
         display:flex;
         padding-top:.16rem;
         justify-content:space-between;
       }
   }
    }
    .ftr{
      display:flex;
      justify-content:center;
      >div{
        display:flex;
        justify-content:space-between;
        width:86%; 
        >div{
          display:flex;
          width:50%;
          justify-content:center;
          align-items:center;
          button{
            width:1.65rem;
            height:.5rem;
            background-color:#308bfe;
            color:#fff;
            font-size:0.175rem;
            border-style:none;
            border-radius:0.05rem;
          }
        } 
      }
    }
`
export {
  ButtonSty,
  LoginSty,
  RegistSty,
  ScrllSty
}